<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>小米Note2</title>
    <link rel="stylesheet" href="onepage/css/onepage-scroll.css"/>
    <style>
        .main{
         min-width:1226px;
            font-family: "Microsoft Yahei", Verdana;
        }
        .page1 {
            background-color: #1bbc9b;
            background-image: url(pic/bg1.jpg);
            background-size: cover;
        }
        .page1 .container{
            max-width:1240px;
            margin:0 auto;
            height: 100%;
            position: relative;

        }

        .page2 {
            background-color: #FF7F50;
            position: relative;
            background-size: cover;

        }

        .page3 {
            background-color: #4BBFC3;
            background-image: url('pic/bg3.jpg');
            background-size: cover;
        }

        .page4 {
            background-color: #f90;
            background-image: url('pic/bg4.jpg');
            background-size: cover;
        }
        .page5{
            background-image: url('pic/bg5.jpg');
            background-size: cover;
        }
        .page6{
            background-image: url('pic/bg6.jpg');
            background-size: cover;
        }
        .page7{
            background-image: url('pic/bg7_1.jpg');
            background-size: cover;
        }
        .page8{
            background-image: url('pic/bg8.jpg');
            background-size: cover;
        }
        img{
            width: 100%;
        }
        .p2-1{
            height: 100%;
            width: 50%;
            background-image:url('pic/bg2-1-s.jpg');
            float: left;
            /*z-index:-1;*/
            background-color: red;
            position: absolute;
            top: 0;
            left: 0;
        }
        .p2-1:hover{
            background-image: url('pic/bg2-1-h.jpg');
            transition: 0.4s linear;
        }
        .p2-2{
            height: 100%;
            width: 50%;
            background-image:url('pic/bg2-2.jpg');
            position: absolute;
            /*background-color: #ff6700;*/
            top: 0;
            right: 0;
            /*z-index:-1;*/
        }
        .p2-2:hover{
            background-image:url('pic/bg2-2-h.jpg');
            transition: 0.4s linear;
        }
        .bg{
            background-size: cover;
            /*overflow: hidden;*/
            /*position: relative;*/
        }
        .page1 .tit{
            color:white;
            line-height: 70px;
            font-size: 44px;
            display: block;
            position: absolute;
            left:50px;
            top: 360px;
            margin:0;
        }
        .page1 .desc{

            font-size: 26px;
            letter-spacing: 2px;
            position: absolute;
            margin:0;
            color:white;
            top: 462px;
            left: 50px;
        }
        .page1 .info{
            font-size: 18px;
            color: #93a1aa;
            position: absolute;
            top: 525px;
            left: 50px;
        }
        .page1 .price{
            color:#fff;
            font-size: 18px;
            position: absolute;
            left: 50px;
            top: 590px;
        }
        .page2 .desc{
            width: 400px;
            height: 300px;
            text-align: center;
            /*background-color:pink;*/
            position: absolute;
            z-index: 10;
            left: 0;
            right: 0;
            margin:auto;
            top: 220px;
            text-align: center;
            color:white;
            line-height: 30px;
            color: #fff;
            font-size: 14px;
        }
        .page2 .text{
            bottom:65px;
            position: absolute;
            text-align: center;
            width: 100%;
            color:#fff;
        }
        .page3 .tit{
            width: 100%;
            text-align: center;
            position: absolute;
            margin:0;
            top: 200px;
            font-size: 26px;
            font-weight: normal;
            color:#fff;
        }
        .page3 .desc{
            width: 100%;
            position: absolute;
            top:292px;
            text-align: center;
            font-size: 14px;
            color:#fff;
            line-height: 25px;
        }
        .page4 .tit{
            position: absolute;
            display: block;
            margin:0;
            left:50px;
            color:#fff;
            bottom:246px;
        }
        .page4 .desc{
            color:#fff;
            font-size: 14px;
            line-height: 25px;
            position: absolute;
            left: 50px;
            bottom: 105px;
        }
        .page6{
            position: relative;
        }

        .page6 .tit{
            display: block;
            position: absolute;
            left:75px;
            margin:0px;
            color:#fff;
            font-size: 26px;
            line-height: 50px;
            top:525px;
            font-size:38px;
        }
        .page6 .desc{
            width: 570px;
            height: 100px;
            position: absolute;
            left:75px;
            top: 645px;
            color:#fff;
            font-size: 14px;
            line-height: 25px;
        }
        .clear-fix{
            list-style: none;
            left:75px;
            position: absolute;
            width: 570px;
            height: 54px;
            top: 760px;
            padding: 0;
        }

        .clear-fix li{
            text-align: center;
            float:left;
            display: block;
            /*width: 84px;*/
            height: 54px;
            border-left:1px solid #fff;
            padding-left:20px;
            margin-left:20px;
        }
        .clear-fix li:nth-of-type(1)
        {
            border:none;
            height: 54px;
            padding: 0;
            margin: 0;
        }
        .clear-fix li span{
            color:#fff;
            font-size: 22px;
        }
        .clear-fix li p{
            color:#fff;
            display: block;
            margin:0;
            font-size:14px;
        }
        .page6 .container{
            max-width:1800px;
            margin:0 auto;
            height: 100%;
            position: relative;
        }
        .page7 .container
        {
            max-width:1200px;
            margin:0 auto;
            height: 100%;
            position: relative;
            /*background-color:pink;*/
        }
        .page7 .img{
            width: 500px;
            height: 30px;
            background-image:url('pic/text.png');
            background-repeat: no-repeat;
            position: absolute;
            left:725px;
            top:410px;
            margin-top:20px;
        }
        .page7 .tit{
            font-size: 26px;
            line-height: 38px;
            color:#fff;
            position: absolute;
            top:145px;
            left:725px;
            font-size: 38px;
            line-height: 50px;
        }
        .page7 .desc{
            position: absolute;
            width: 500px;
            height: 130px;
            left:725px;
            top:265px;
            margin-top: 20px;
            font-size: 16px;
            line-height: 26px;
            color:#fff;
        }
        .page8 .tit{
            position: absolute;
            margin:0;
            width: 100%;
            color:#fff;
            text-align: center;
            font-size: 26px;
            line-height: 38px;
            top: 178px;
        }
        .page8 .desc
        {
            position: absolute;
            top:230px;
            width: 100%;
            text-align: center;
            color:#fff;
            font-size: 14px;
            line-height: 25px;
        }
        .page8 .box
        {
            position: absolute;
            top: 380px;
            width: 231px;
            height: 60px;
            border:2px solid #fff;
            left: 0;
            right: 0;
            margin:auto;
            padding:10px;
            box-sizing: border-box;
            font-size:14px;
            text-align: center;
            color:#fff;
        }
        .page8 .box li{
            display: block;
            float:left;
            height:40px;
            width: 102px;

        }
        .page8 .box li:nth-of-type(1){
            border-right:2px solid #b8bfc7;
        }
        .page8 p{
            margin:0;
        }
        .page8 a{
            text-decoration: none;
            color:white;

        }
        .page8 a:hover{
            text-decoration: underline;
        }
        .page5{
            /*background-image: url(000.png);*/
            color:#fff;
        }
        .page5 .cpu
        {
            width:100%;
            height: 100%;
            min-width: 1226px;
        }
        .cpu li{
            display: block;
            width: 33.33%;
            height: 50%;
            /*background-color: red;*/
            float: left;
            box-sizing: border-box;
            border-right:1px solid #c7cdd3;
            border-top:1px solid #c7cdd3;
            padding-top:51.781px;
            position: relative;
            text-align: center;
            min-height: 405px;
        }
        .icon{
            width: 198px;
            height: 168px;
            background-image:url('pic/icons.png');
            margin:0 auto;
        }
        .page5 .tit{
            /*margin:0px;*/

        }
        .icon1{
            background-position: center 1008px;
        }
        .icon2{
            background-position: center 840px;
        }
        .icon3{
            background-position: center 675px;
        }
        .icon4{
            background-position: center 500px;
        }
        .icon5{
            background-position: center 340px;
        }
        .icon6{
            background-position: center 180px;
        }

    </style>
    <script src="jquery-3.1.0.js"></script>
    <script src="onepage/js/jquery.onepage-scroll.min.js"></script>
    <script>
        $(function () {
            $('.main').onepage_scroll({
                sectionContainer: '.page',
                loop: false
            });
        });

    </script>
</head>

<body>
<div class="main">
    <div class="page page1 bg">
        <div class="container">
        <h2 class="tit">小米Note 2 双曲面商务旗舰</h2>
        <p class="desc">一面科技，一面艺术</p>
        <div class="info">5.7" 双曲面柔性屏，正反面 3D 曲面玻璃 / 2256万超高像素相机<br>骁龙821 性能版，可选 6GB + 128GB</div>
        <div class="price">64GB 2799元 | 128GB 3299元</div>
        </div>
    </div>
    <div class="page page2">
        <!--<p class="title">第二屏</p>-->
        <div class="p2-1 bg">
            <div class="text">播放《梁朝伟 冰山理论》</div>
        </div>
        <div class="p2-2 bg">
            <div class="text">播放《小米Note 2 工艺》</div>
        </div>
        <div class="desc">
            就像经典的冰山理论，<br>
            第一眼看到的美，<br>
            只是全部创作的 1/8。<br>
            美的一面，是因为另一面了不起的探索：<br>
            小米Note 2 艺术品般的双曲面，背后是创新的柔性屏科技。<br>
            更强大的性能，则来自于更快的处理器、更快的存储、<br>
            更高像素的相机，以及对黑科技的不断探索。<br>
            创新的科技与艺术品般的工艺，<br>
            这就是我们为你打造的高端商务旗舰手机 。<br>
            小米Note 2 , 一面科技，一面艺术。
        </div>
    </div>
    <div class="page page3 bg">
      <h2 class="tit">艺术品般的双曲面<br>背后是创新的柔性屏科技</h2>
        <div class="desc">双曲面的美，源自对屏幕科技的不断探索。小米Note 2 采用 OLED 柔性屏，<br>一块可以弯曲的屏幕*，贴合于艺术品般的曲面玻璃，更高屏占比让纤薄的机身，<br>拥有更大显示面积。画面仿佛在曲面流动，视觉也得到了更大的延展。</div>
    </div>
    <div class="page page4 bg">
       <h2 class="tit">商务旗舰<br>黑科技，不仅仅是「快」</h2>
        <div class="desc">这依然是小米最快的安卓旗舰*！<br>
            骁龙821 性能版，高性能下再提速 10%。<br>
            可选 6GB +128GB 高速内存、闪存，进一步提升性能。<br>
            4070mAh 电池、高精度定位、HD 高清音质，<br>
            小米Note 2 不仅更快，更是方方面面全高端配置</div>
    </div>

    <div class="page page5 bg">
        <ul class="cpu">
            <li>
                <div class="icon icon1"></div>
                <h2 class="tit">骁龙821 性能版</h2>
                <p class="desc">最高主频达 2.35GHz ，应用启动速度相比骁龙<br>
                    820 提升10%，游戏、聊天、音乐、购物、阅<br>
                    读等多个应用同时使用，也能快的超乎想象。</p>
            </li>
            <li>
                <div class="icon icon2"></div>
                <h2 class="tit">128GB 超大容量</h2>
                <p class="desc">大容量代表着你可以安装更多应用、存储更多视频。<br>
                    同时支持新一代闪存标准 UFS 2.0* ，全双工运行，<br>
                    安装、运行程序，看视频速度都更快了。</p>
            </li>
            <li>
                <div class="icon icon3"></div>
                <h2 class="tit">6GB 超大内存</h2>
                <p class="desc">LPDDR4 双通道内存，意味着带宽更大、功耗更低。<br>
                    玩大型游戏、开启多个应用、观看 4K 视频、拍摄慢动作<br>
                    视频等运算速度都有了大幅提升。</p>
            </li>
            <li>
                <div class="icon icon4"></div>
                <h2 class="tit">4070mAh 大电量</h2>
                <p class="desc">46小时持续通话、15小时视频播放*……大电量还能<br>
                    让你尽情尽兴的游戏、看书和拍照。坐飞机出差，<br>
                    看完一整季《权利的游戏》也不在话下。</p>
            </li>
            <li>
                <div class="icon icon5"></div>
                <h2 class="tit">HD 高清音质</h2>
                <p class="desc">采用双时钟源设计，输出高动态、低失真的高清音质，让你
                    <br>不<br>
                    论是听摇滚、清唱、爵士乐都如临现场。同时支持双 ADC<br>
                    输入, 高动态范围录音将有效录音距离提升4倍。</p>
            </li>
            <li>
                <div class="icon icon6"></div>
                <h2 class="tit">GPS 高精度定位</h2>
                <p class="desc">一般手机在过隧道时常常失去卫星信号，<br>
                    小米Note 2 内置 SAP 辅助定位，<br>
                    为你在城市环境中持续提供导航，路线更精准。</p>
            </li>
        </ul>
    </div>
    <div class="page page6 bg">
        <!--<p class="title">第六屏</p>-->
        <div class="container">
        <h2 class="tit">2256 万超高像素相机<br>细节多得惊人</h2>
        <div class="desc">主相机多达 1.7 倍的像素数*，带来震撼人心的照片细节。<br>
            高像素为照片提供了超高分辨率，放大看，依然清晰。<br>
            强大的相机性能，甚至能为 4K 影片进行硬件级防抖。<br>
            前置相机首次支持自动对焦*，自拍美得有细节，合影人人都清晰。</div>
        <ul class="clear-fix">
            <li><span>IMX318</span><p>超高像素</p></li>
            <li><span>AF</span><p>前置自动对焦</p></li>
            <li><span>4K</span><p>硬件级视频防抖</p></li>
        </ul>
        </div>
    </div>
    <div class="page page7 bg">
        <!--<p class="title">第七屏</p>-->
        <div class="container">
        <h2 class="tit">4G+ 全球版<br>小米Note 2 走遍全球</h2>
        <div class="desc">游览整个世界的美景，或准备去地球另一端开下一个<br>
            会议，带上小米Note 2 全球版 想去哪里都可以。对通讯<br>
            科技进一步的探索，使小米Note 2 支持全球主流频<br>
            段。6 模 37 频，意味着你在世界各地，都能使用<br>
            当地高速 4G 网络*。</div>
        <div class="img"></div>
        </div>
    </div>
    <div class="page page8 bg">
        <h2 class="tit">亮黑与冰川银</h2>
        <div class="desc">一面光明，一面夜晚的亮黑色，<br>
            黑得深邃，而光线照时却很明亮，优雅而神秘。<br>
            一面天空，一面大海的银色，<br>
            安静得像大海，光线流转时却像天空。<br>
            玻璃的材质，却拥有金属光泽，如梦如幻。</div>
        <div class="box">
            <li><p>64GB 2799元</p><a href="">立即预约</a></li>
            <li><p>128GB 3299元</p><a href="">立即预约</a></li>
        </div>
    </div>

</div>

</body>
</html>